<template>
  <!-- 3zeh菜单列表 -->
  <div class="breadcrumb">
    <Breadcrumb :aaa="aaa" :msgg="msg" :txt="txt" :path1="path1" />
  </div>

  <div class="dataList">
    <div class="hdclass">
      <el-icon>
        <Memo />
      </el-icon>
      <span style="line-height: 30px">筛选搜索</span>
    </div>
    <div>
      <el-button type="primary" @click="tianjiaclick">添加</el-button>
    </div>
  </div>
  <!-- 本页面 -->
  <div v-show="show_show">
    <el-table border style="width: 97%" :data="tableData" class="borderyangshi">
      <el-table-column label="编号" prop="id" width="100"></el-table-column>
      <el-table-column label="菜单名称" prop="title"></el-table-column>
      <el-table-column label="菜单级数" width="180">
        <span>一级</span>
      </el-table-column>
      <el-table-column label="前端名称" prop="name"></el-table-column>
      <el-table-column label="前端图标" prop="icon"></el-table-column>
      <el-table-column label="是否显示" width="194">
        <template #default="scope">
          <el-switch :value="scope.row.hidden === 0 ? true : false" @change="clickchange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" width="194"></el-table-column>

      <el-table-column label="设置" width="194">
        <template #default="scope">
          <el-button class="bgcblue" link @click="chakanxiajiclick(scope.row.id)">查看下级</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="" width="180">
        <template #default="scope">
          <span @click="bianjiid(scope.row)" class="bgcblue">编辑</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination class="fenye" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
      background :page-sizes="[2, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-right: 20px" />
  </div>
  <!-- 二级页面 -->
  <div v-show="!show_show">
    <el-table border style="width: 100%" :data="tableData" class="borderyangshi">
      <el-table-column label="编号" prop="id" width="80"></el-table-column>
      <el-table-column label="菜单名称" prop="title" width="150"></el-table-column>
      <el-table-column label="菜单级数" width="150">
        <span>二级</span>
      </el-table-column>
      <el-table-column label="前端名称" prop="name" width="150"></el-table-column>
      <el-table-column label="前端图标" prop="icon" width="150"></el-table-column>
      <el-table-column label="是否显示" width="150">
        <template #default="scope">
          <el-switch :value="scope.row.hidden === 0 ? true : false" @change="clickchange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" width="150"></el-table-column>

      <el-table-column label="设置" width="150">
        <el-button class="bgcblue" link disabled>查看下级</el-button>
      </el-table-column>

      <el-table-column label="操作" prop="" width="115">
        <template #default="scope">
          <span @click="bianjiid(scope.row)" class="bgcblue">编辑</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination class="fenye" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
      background :page-sizes="[2, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
import { Search, Memo } from "@element-plus/icons-vue";
import useTabel from "../../hooks/useTables";
import * as api from "../../request/api";
import router from "../../router";
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
let msg = ref("菜单列表");
let txt = ref("权限");
let path1 = ref("oms/order");
let aaa = ref(0);

const route = useRoute();
// 请求
let {
  tableData,
  getTableData,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTabel(api.menu.getAdminmenu, {
  id: Number(route.query.id),
});
// 显隐切换
let clickchange = async (row: any) => {
  // 点击之后发起请求把hidden变成 0 显示|1 隐藏 这样实现点击切换
  // console.log(hidden);
  console.log("----------", row);
  if (row.hidden == 0) {
    row.hidden = 1;
    await api.menu.adminupdateHidden(row);
    return;
  }
  if (row.hidden == 1) {
    row.hidden = 0;
    await api.menu.adminupdateHidden(row);
    return;
  }

  // await api.admin.adminupdateHidden(row)
};

console.log("tableData0101", tableData);
// 添加
let tianjiaclick = () => {
  router.push("/ums/addMenu");
};
// 编辑
let bianjiid = (id: any) => {
  console.log(id.id);
  router.push(`/ums/addMenu?id=${id.id}`);
};
// 二级显示
let show_show = ref(true);
let chakanxiajiclick = async (id: any) => {
  // 点击之后跳转,显示,
  // 进行跳转
  router.push(`/ums/menu?id=${id}`);
  // 重新渲染
  getTableData();
  // 发请求
  let getAdminmenu = await api.menu.getAdminmenu(id);
  console.log("getAdminmenu", getAdminmenu);

  setTimeout(() => {
    router.go(0);
  });
};
watch(
  () => route.query.id,
  (newval) => {
    // 监听二级菜单的显示隐藏
    if (route.query.id) {
      // 点击显示二级菜单
      show_show.value = false;
    } else {
      show_show.value = true;
    }
    // setTimeout(() => {
    //     router.go(0)
    // });
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.dataList {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 1px 2px 1px #888888;
  margin: 20px;
}

.fenye {
  float: right;
  margin: 20px 0;
}

.bgcblue {
  color: #4e77e6;
  font-size: 12px;
  cursor: pointer;
}

.borderyangshi {
  margin: 20px;
}

:deep .el-table .el-table__cell {
  text-align: center !important;
}

:deep .el-table thead {
  font-weight: bold !important;
}
</style>
